<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;新增商品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" label-width="160px">
                <el-form-item label="项目分类：">
                    <el-cascader
                        :options="options"
                        expand-trigger="hover"
                        v-model="selectedOptions"
                        >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="商品封面图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="bannerPicture.length>0">
                            <div v-for="(item, index) in bannerPicture" class="sola-flex" :key="index">
                                <img  :src="item" />
                                
                            </div>
                        </div>
                        
                    </div>
                </el-form-item>
                <el-form-item label="商品标题：">
                    <el-input v-model="title" placeholder="请输入商品标题" style="width:600px" disabled></el-input>
                </el-form-item>

                <el-form-item label="商品规格信息：">
                    <div class="clearfix">
                        <div v-for="(item,index) in skuProp" style="padding-bottom:10px;" :key="index">
                            <el-input v-model="item.spec"  placeholder="请输入规格名称" style="width:160px" clearable disabled></el-input>
                            <el-input v-model="item.price" type="number" placeholder="请输入规格原价" style="width:160px" disabled></el-input>
                            <el-input v-model="item.discount_price" type="number" placeholder="请输入规格优惠价" style="width:160px" disabled></el-input>
                            <el-input v-model="item.stock" type="number" placeholder="请输入规格SKU" style="width:160px" disabled></el-input>
                            
                        </div>
                        
                    </div>
                </el-form-item>
                <el-form-item label="商品详情图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="detailPicture.length>0">
                            <div v-for="(item, index) in detailPicture" class="sola-flex" :key="index">
                                <img  :src="item" />
                                
                            </div>
                            
                        </div>
                        
                    </div>
                </el-form-item>
                <el-form-item label="是否推荐商品：">
                    <el-radio v-model="is_recommend" label="0" border disabled>否</el-radio>
                    <el-radio v-model="is_recommend" label="1" border disabled>是</el-radio>
                </el-form-item>
                <el-form-item label="是否热卖商品：">
                    <el-radio v-model="is_hot" label="0" border disabled="">否</el-radio>
                    <el-radio v-model="is_hot" label="1" border disabled>是</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button  @click="returnList">返回商品列表</el-button>
                    
                </el-form-item>
            </el-form>
        </div>
        
    </div>
</template>
<script>
export default {
    name:"goodsList",
    data() {
        return {
            idx:0,//当前记录的下标
            delVisible:false,
            selectedOptions:[],//选中的商品分类
            options:[],//分类数据
            accept: 'image/gif, image/jpeg, image/png, image/jpg', //图片上传类型
            typeId:'', //当前要删除图片的类型   1封面图 2详情图
            bannerPicture:[],//存放的商品轮播图
            detailPicture:[],//存放的商品详情图
            title:'',//商品标题
            is_recommend:"0",
            is_hot:"0",
            skuProp:[{spec:'',price:"",discount_price:"",stock:""}]//规格、价格、优惠价、sku
        }
    },
    //实例创建
    created(){
        //获取商品的分类
        this.getGoodsClassify();
        //获取商品信息
        //console.log(this.$route.params.goodsId);
        if(this.$route.params.goodsId && this.$route.params.goodsId>0){
            this.getGoodsInfo();
        }else{
            //跳转商品信息
            console.log("获取是商品ID失败")
        }
        
    },
    //计算属性
    computed:{

    },
    //方法
    methods: {
        //获取商品信息
        getGoodsInfo(){
            var _this = this;
            //获取商品信息
            this.$axios.get('/manage/goods/detail', {
                params: {
                    goodsId:this.$route.params.goodsId,
                }
            })
            .then(function (response) {
                // console.log("获取商品信息成功");
                console.log(response);
                if(response.data.code==200){
                    var data = response.data.data;
                    //获取项目的分类  然后默认选中
                    let category =[];
                    category.push(data.category_level1);
                    category.push(data.category_level2);
                    _this.selectedOptions = category;
                    //封面图 不用转换 JSON格式
                    if(typeof(data.banner_img)!="object"){
                        _this.bannerPicture = JSON.parse(data.banner_img);
                    }else{
                        _this.bannerPicture = data.banner_img;
                    }
                    //详情图 不用转换 JSON格式
                    if(typeof(data.detail)!="object"){
                        _this.detailPicture = JSON.parse(data.detail);
                    }else{
                        _this.detailPicture = data.detail;
                    }
                    //获取商品标题
                    _this.title = data.name;
                    //获取商品规格信息
                    if(data.specList.length>0){
                        //表示有商品规格信息
                        _this.skuProp = data.specList;
                    }
                    _this.is_recommend =""+data.is_recommend+"";
                    _this.is_hot = ""+data.is_hot+"";

                }else{
                    console.log("获取商品详情失败");
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        //获取商品的分类
        getGoodsClassify(){
            var _this = this;
            this.$axios.get('/manage/goods/categoryList', {
                params: {
                    pageIndex:1,
                    pageSize:999
                }
            })
            .then(function (response) {
                // console.log(response);
                if(response.data.code==200){
                    var data = response.data.data;
                    var array = [];
                    data.forEach(element => {
                        //console.log(element);
                        let obj ={};
                        obj.value = element.id;
                        obj.label = element.name;
                        obj.disabled = true;
                        var cities = [];
                        element.children.forEach(rows=>{
                            let subObj ={};
                            subObj.value = rows.id;
                            subObj.label = rows.name;
                            subObj.disabled = true;
                            cities.push(subObj);
                        });
                        obj.children =cities;
                        array.push(obj);
                    });
                    //console.log(array);
                    _this.options = array;
                }else{

                    console.log("获取分类失败");
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        //返回商品列表页
        returnList(){
            this.$router.push({ path: '/goods'});
        }
    }
}
</script>
<style lang="stylus" scoped>
    .el-form-item .el-cascader{
        width :400px;
    }
    .el-cascader-menus .el-cascader-menu{
        width :240px
    }
    .sola-upload{
        .sola-left{
            width :100%;
            height :auto;
            .sola-flex{
                float:left
                width: 360px;
                height: 180px;
                margin-bottom 20px;
                margin-right:15px;
                position:relative;
                .delete{
                    position:absolute;
                    top:2px;
                    right:13px;
                    color: #f56c6c;
                    display:inline-block;
                    padding:5px 5px;
                    .el-alert__icon{font-size:28px;cursor:pointer}
                }
                img {
                    width:100%;
                    height:100%;
                }
            }
        }
        .sola-file-box{
            position:relative;
            .btn-file{
                position:absolute;
                top:0;
                left:0;
                z-index 1;
                opacity:0;
                width :120px;
                height :40px;
                outline: 0;
                background-color :none;
                cursor:pointer;
            }
        }

    }
</style>


